<template>
  <el-container style="height: 100%; overflow: hidden">
    <el-header>
      <!-- <img :src="imgSrc" width="100%" height="100%" alt="" class="imgSrc" /> -->
      <common-header></common-header>
    </el-header>
    <el-container>
      <!-- <el-aside width="64px"> -->
      <!-- <common-aside></common-aside> -->
      <!-- </el-aside> -->
      <el-main>
        <router-view />
      </el-main>
      <div class="navimg" @click="navshow"></div>
      <transition name="slide-fade">
        <common-aside v-if="isShowNav" @getChild="getChildInfo"></common-aside>
      </transition>
    </el-container>
    <el-dialog :visible.sync="personpolice" width="75%" title="实时报警信息" @close="handleClose">
      <el-table :data="PersonList" class="backtable" height="350">
        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
       <el-table-column
          prop="csMineShortname"
          label="煤矿名称"
          min-width="60px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerPoint"
          label="传感器监测地点"
          min-width="70px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="inOutType"
          label="传感器类别"
          min-width="60px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.inOutType === '1'? '模拟量' : '开关量'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerState"
          label="传感器状态"
          min-width="60px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.ssTransducerState == '0'
                ? '正常'
                : scope.row.ssTransducerState == '1'
                ? '报警'
                : scope.row.ssTransducerState == '2'
                ? '断电'
                : '超量程'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="ssTransducerType"
          label="传感器类型"
          min-width="60px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValueName"
          label="监测值"
          min-width="60px"
          show-overflow-tooltip
          v-if="isShow2"
        >
        </el-table-column>
        <el-table-column
          prop="ssTransducerValue"
          label="监测值"
          min-width="60px"
          show-overflow-tooltip
          v-if="isShow1"
        >
        <template slot-scope="scope">
          {{scope.row.ssTransducerValue}}({{scope.row.company}})
        </template>
        </el-table-column>
        <el-table-column
          prop="ssAlarmStime"
          label="报警开始时间"
          min-width="60px"
          show-overflow-tooltip
        >
         <template slot-scope="scope">
          <span>{{ parseTime(scope.row.ssAlarmStime) }}</span>
        </template>
        </el-table-column>

        <el-table-column
          prop="ssAlarmDuration"
          label="报警持续时长"
          min-width="60px"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="ssMaxValue"
          label="最大值"
          min-width="60px"
          show-overflow-tooltip
           v-if="isShow1"
        >
         <template slot-scope="scope">
          {{scope.row.ssMaxValue}}({{scope.row.company}})
        </template>
        </el-table-column>
        <el-table-column
          prop="ssMinValue"
          label="最小值"
          min-width="60px"
          show-overflow-tooltip
           v-if="isShow1"
        >
         <template slot-scope="scope">
          {{scope.row.ssMinValue}}({{scope.row.company}})
        </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- <audio
      class="audio"
      :src="videoUrl"
      controls="controls"
      ref="audio"
      loop="loop"
      :hidden='true'
      :autoplay="isPlaying"
      id="audio"
    ></audio> -->
  </el-container>
</template>

<script>
import CommonHeader from "@/components/CommonHeader/index";
import CommonAside from "@/components/CommonAside/index";
import CommonNav from "@/components/CommonNav";
import { WebScoket } from "@/api/websocket.js";
export default {
  mixins: [WebScoket],
  components: {
    CommonAside,
    CommonHeader,
    CommonNav
  },
  data() {
    return {
      videoUrl: require("@/assets/img/video.mp3"),
      // imgSrc: require('../assets/images/title.png')
      // Img: {
      //   backgroundImage: 'url(' + require('../assets/images/backdrop1.png') + ')',
      //   backgroundRepeat: 'no-repeat',
      //   backgroundSize: '100% 100%'
      // }

      personpolice: false,
      PersonList: [],
      isShowNav: false,
      lastRunTime: "",
      currentTime: "",
      transferlist: [],
      isPlaying:false,
      isisAlarm:[],
      websocketData:[],
       isShow1:false,
       isShow2:false,
    };
  },
  mounted: function() {
    this.webValue = "/net/websocket/safeAlarmResult/" + this.checkCode;
    this.initWebSocket();
    var that = this;
    document.addEventListener("click", function(e) {
      if (e.target.className != "navmain" && e.target.className != "navimg") {
        that.isShowNav = false;
      }
    });
    // var that = this;
    // setInterval(function() {
    //   that.transfer();
    // }, 60000*5);
  },
  created () {
  },
  methods: {
     
    // play() {
    //   this.lastRunTime = Date.now();
    //   let audio = document.querySelector("#audio");
    //   if (!this.isPlaying) {
    //     audio.play();
    //     this.isPlaying = true;
    //   }
    //   let timeOut = setTimeout(() => {
    //     this.stop(timeOut);
    //   }, 4000);
    // },
    // stop(timeOut) {
    //   this.currentTime = Date.now();
    //   let audio = document.querySelector("#audio");
    //   if (this.currentTime - this.lastRunTime < 4000) {
    //     audio.play();
    //     this.isPlaying = true;
    //   } else {
    //     if (this.isPlaying) {
    //       audio.currentTime = 0;
    //       audio.pause();
    //       this.isPlaying = false;
    //     }
    //   }
    //   clearTimeout(timeOut);
    // },

    getChildInfo(data) {
      this.isShowNav = data;
    },
    navshow() {
      this.isShowNav = !this.isShowNav;
    },
    // 安全报警
    websocketonmessage(e) {
      this.websocketData=[]
      console.log(510, e.data);
      // psAreaTypelist
      this.websocketData.push(JSON.parse(e.data));
      let type=this.websocketData[0].inOutType
      if(type=='1'){
        this.isShow1 = true
        this.isShow2 = false
      }else{
        this.isShow2 = true
        this.isShow1 = false
      }
      const that = this;
      this.$notify({
        title: "报警信息",
        dangerouslyUseHTMLString: true,
        position: "bottom-right",
        duration: 10000,
        type: "warning",
        message: "安全报警信息，请立即查看",
        onClick() {
          that.getpersonnews(that.websocketData);
          this.close();
        }
      });
    },
     handleClose() {
      this.PersonList = []
    },
    getpersonnews(data) {
      this.PersonList=[]
      this.personpolice = true;
      this.PersonList = data;
    }
  }
};
</script>

<style lang="scss" scoped>
// .imgSrc {
//   position: absolute;
//   top: 0;
//   left: 0;
//   height: 60px;
// }
.el-menu {
  border: none;
}
.el-header {
  padding: 0;
  background: #16243f;
}
.el-main {
  background: #16243f;
  padding: 0;
}
aside {
  padding: 0;
  margin-bottom: 0px;
  overflow: hidden;
  border-radius: 0;
}
::v-deep .el-dialog {
  background: url("../assets/img/dialogback.png") no-repeat !important;
  background-size: 100% 100% !important;
  padding: 0.2rem 0.4rem 0.3rem !important;
}
::v-deep .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(6, 26, 57, 0.8) !important;
}
.el-container {
  width: 100%;
  height: 100%;
  position: relative;
  .navimg {
    height: 1.75rem;
    width: 0.28rem;
    background: url(../assets/images/nav.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;
    z-index: 150;
    //background: #7c8fb4;
  }
  .navmain {
    position: absolute;
    left: 0.1rem;
    top: 0;
    bottom: 0;
    z-index: 100;
  }
}
</style>
<style>
/* .el-input--mini .el-input__inner {
  border: 1px solid #074e83;
  background: #06244ec9;
  color: #ccc;
}
.el-select-dropdown__item {
  color: #fff;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #1a4c99;
} */
.el-scrollbar__wrap {
  overflow: scroll;
  height: 100%;
  background: #16243f;
}

.el-popper[x-placement^="bottom"] {
  margin-top: 12px;
  border: 1px solid #3d3f8b;
}
</style>
